import { DndContext } from "@dnd-kit/core"
import Draggable from './Draggable';
import Droppable from './Droppable';
import { useState } from "react";


const Dnd = () => {

    const [isDropped, setIsDropped] = useState(false);
    const [isDropped1, setIsDropped1] = useState(false);
    const [isDropped2, setIsDropped2] = useState(false);
    const [isDropped3, setIsDropped3] = useState(false);
    const [isDropped4, setIsDropped4] = useState(false);
    const draggableMarkup = (
        <Draggable>Drag me</Draggable>
    );

    return (
        <DndContext onDragEnd={handleDragEnd}>
            {!isDropped ? draggableMarkup : null}
            <Droppable id={"droppable1"}>
                {isDropped1 ? draggableMarkup : <div style={{borderStyle: 'solid',maxWidth:'100px'}}>11</div>}
            </Droppable>
            <Droppable id={"droppable2"}>
                {isDropped2 ? draggableMarkup : 'Drop here2'}
            </Droppable>
            <Droppable id={"droppable3"}>   
                {isDropped3 ? draggableMarkup : 'Drop here3'}
            </Droppable>
            <Droppable id={"droppable4"}>
                {isDropped4 ? draggableMarkup : 'Drop here4'}
            </Droppable>
        </DndContext>
    );

    function handleDragEnd(event: any) {
        if (event.over && event.over.id === 'droppable') {
            setIsDropped(true);
        }
        if(event.over){
            if(event.over.id === "droppable1"){
                setIsDropped(true);
                setIsDropped1(true);
            }else 
            if(event.over.id === "droppable2"){
                setIsDropped(true);
                setIsDropped2(true);
            }else 
            if(event.over.id === "droppable3"){
                setIsDropped(true);
                setIsDropped3(true);
            }else 
            if(event.over.id === "droppable4"){
                setIsDropped(true);
                setIsDropped4(true);
            }
        }
    }
}

export default Dnd